<template>
<div class="condition-container">
    <div class="fixedBar">
    <div class="all">
        <ul class="firstBar">
            <li class="condition-general" data-id="0" @click="skim($event)" :class="{checked:tab==0}">最新</li>
            <li class="condition-general" data-id="1" @click="skim($event)" :class="{checked:tab==1}">人气</li>
            <li class="condition-general" data-id="2" @click="skim($event)" :class="{checked:tab==2}">收藏</li>
            <li class="condition-general" data-id="3" @click="skim($event)" :class="{checked:tab==3}">
                价格
                <i class="priceup" :class="{checkedup:tab==3&&!isRed}"></i>
                <i  ref="pricedown" class="pricedown" :class="{checkeddown:tab==3&&isRed}"></i>
            </li>            
        </ul>
        <router-link to="/search"><div class="search">筛选</div></router-link>
    </div>
    <div class="detail">
        <ul class="secondBar">
            <li class="condition-detail" :class="{active:current==0}" id="0" @click="choose($event)">
                <span class="view">{{appear()}}<i ref="arrow" class="arrow"></i></span>               
            </li>
            <li class="condition-detail" :class="{active:current==1}" id="1" @click="choose($event)">
                <span class="view">{{appearLevel()}}<i ref="arrow" class="arrow"></i></span>               
            </li>
            <li class="condition-detail" :class="{active:current==2}" id="2" @click="choose($event)">
                <div class="pfstyle">
                    <span v-show="pf.zhsl==''&&pf.rwpf==''&&pf.cwpf==''&&pf.zbpf==''" class="view">评分<i ref="arrow" class="arrow"></i></span>
                     {{show(pf.zhsl,"综合实力",10000,99999)}}
                    {{show(pf.rwpf,"人物评分",5000,99999)}}
                    {{show(pf.cwpf,"宠物评分",5000,99999)}}
                    {{show(pf.zbpf,"装备评分",5000,99999)}}                 
                </div>                             
            </li>
            <li class="condition-detail" :class="{active:current==3}" id="3" @click="choose($event)">
                <span class="view">{{appearPrice()}}<i ref="arrow" class="arrow"></i></span>              
            </li>
        </ul>
    </div>
    <div class="czxt" v-show="current==0">
        <ul class="half">
            <li class="half-cont" v-for="item in czxtList" :key="item" :class="{'activeitem':signleCzxtList.indexOf(item)>-1}" @click="option(item,signleCzxtList)">
                {{item}}<i ref="rightup" class="rightup"></i>
            </li>
        </ul>
    </div>
    <div class="dj" v-show="current==1">
        <ul class="three" >
            <li class="three-cont" v-for="item in djList" :key="item.level" :class="{'activeitem':signleDjList.indexOf(item)>-1}" @click="signle(item,signleDjList)">{{item.level}}</li>
        </ul>
    </div>
    <div class="pf" v-show="current==2">
        <ul>
              <li class="half-pf">
                  <div class="pf-title">综合实力</div>
                  <div class="pf-sign">≥</div>
                  <input type="tel" placeholder="1w-10w" class="point" v-model="pf.zhsl">
              </li>
              <li class="half-pf">
                  <div class="pf-title">人物评分</div>
                  <div class="pf-sign">≥</div>
                  <input type="tel" placeholder="5k-10w" class="point" v-model="pf.rwpf">
              </li>
              <li class="half-pf">
                  <div class="pf-title">宠物评分</div>
                  <div class="pf-sign">≥</div>
                  <input type="tel" placeholder="5k-10w" class="point" v-model="pf.cwpf">
              </li>
              <li class="half-pf">
                  <div class="pf-title">装备评分</div>
                  <div class="pf-sign">≥</div>
                  <input type="tel" placeholder="5k-10w" class="point" v-model="pf.zbpf">
              </li>        
          </ul>
    </div>
    <div class="jg clear" v-show="current==3">
        <div class="jg-input">
            <input type="tel" placeholder="请输入最低价格" class="jg-min" v-model="inputminprice">
            <div class="fgf">-</div>
            <input type="tel" placeholder="请输入最高价格" class="jg-min" v-model="inputmaxprice">
        </div>
        <ul class="three-jg" >
            <li class="three-txt" v-for="item in jgList" :key="item.price" @click="signlePrice(item, signleJgList)">{{item.price}}</li>
        </ul>
        
    </div>
    <div class="btn"  v-show="current>=0">
            <div class="reset" @click="reset()">重置</div>
            <div class="sure" @click="headsearch()">确定</div>
    </div>
    </div>
    <div class="mask"  v-show="current>=0">
    </div>
    <div class="content">
        <common :List="SpecificList"></common>
    </div>
</div>
</template>
<script>
import axios from "axios";
import Common from "@/pages/common/Common";
export default {
    name:'ListCondition',
    data(){
        return{
            isRed:false,
            tab:1,
            current:-1,
            inputlevel:'',
            inputmaxprice:'',
            inputminprice:'',
            optionsList:["操作系统","等级","评分","价格(元)"],
            czxtList:["ios平台","安卓平台"],
            djList:[{level:"69级",minlevel:69,maxlevel:69,betweenlevel:"69~69"},
            {level:"70-89级",minlevel:70,maxlevel:89,betweenlevel:"70~89"},
            {level:"90-119级",minlevel:90,maxlevel:119,betweenlevel:"90~119"}],
            jgList:[
             {price:"61-499",minprice:61,maxprice:499},
             {price:"500-999",minprice:500,maxprice:999},
             {price:"1000-1999",minprice:1000,maxprice:1999},
             {price:"2000-2999",minprice:2000,maxprice:2999},
             {price:"3000-3999",minprice:3000,maxprice:3999},
             {price:"4000-4999",minprice:4000,maxprice:4999},
             {price:"5000以上",minprice:5000,maxprice:1500000}
            ],
            pf:{
                zhsl:'',
                rwpf:'',
                cwpf:'',
                zbpf:''
             },
            signleCzxtList:[],
            signleDjList:[],
            signleJgList:[],
            SpecificList:[]
        }
    },
    methods:{
        skim(e){
            let tabid=e.target.dataset.id
            this.tab=tabid
            if(this.tab==3){
                this.isRed=!this.isRed
            }
            this.search();
        },
        choose(e){                                    
            if(this.current==-1){
                let curid=e.currentTarget.id
                this.current=curid
            }else{
                this.current=-1
            }
        },
        option(item, checkedList){
            let arrIndex=checkedList.indexOf(item);
            if(arrIndex>-1){
           checkedList.splice(arrIndex,1)
            }else{      
           checkedList.push(item)   
           
            }
               
        },
        signle(item, signleList){
            let arrIndex=signleList.indexOf(item);
            signleList.splice(0,signleList.length);
            if(arrIndex==-1){
                signleList.push(item);  
                   this.inputlevel=item.betweenlevel;         
            }

        },
        signlePrice(item, signleList){
            let arrIndex=signleList.indexOf(item);
            signleList.splice(0,signleList.length);
            this.inputminprice='';
            this.inputmaxprice='';
            if(arrIndex==-1){
                signleList.push(item);   
                this.inputminprice=item.minprice;  
                this.inputmaxprice=item.maxprice;     
            }
        },
        show(point,name,midValue,maxValue){
            if(point>maxValue)
            {
                this.point=maxValue;
            }
            if(point<=0){
                return  ''
            }else if(point<=midValue){
                return  name+'≥'+midValue
            }else if(point<maxValue){
                return  name+'≥'+point
            }else{
                return  name+'≥'+maxValue
            }
        },
        appear(){
                if(this.signleCzxtList.length>0){
                return this.signleCzxtList.join(',')
                }else{
                return "操作系统"
                }            
            
        },
        appearLevel(){
            if(this.signleDjList.length>0){
                return this.inputlevel;
                }else{
                return "等级"
                }    
        },
        appearPrice(){
            if(this.signleJgList.length>0){
                return this.inputminprice+'~'+this.inputmaxprice
                }else{
                return "价格(元)"
                }    
        },
        reset(){
            this.signleCzxtList.splice(0,this.signleCzxtList.length);
            this.signleDjList.splice(0,this.signleDjList.length);
            this.pf.zhsl='',
            this.pf.rwpf='',
            this.pf.cwpf='',
            this.pf.zbpf='',           
            this.inputmaxprice='',
            this.inputminprice=''
        },
        headsearch(){
            //隐藏
            this.search(1);
            this.current=-1

        },
        search(isbtn){
                var param={};
                if(this.$route.params.type&&!isbtn){
                    param=this.$route.params; 
                }
                else{
                    if(this.$route.query.type){
                        param={type:this.$route.query.type};
                    }else{
                        param={type:this.$route.params.type};
                    }
                  
                    //操作系统
                    if(this.signleCzxtList&&this.signleCzxtList.length>0){
                        var czxt=[];
                        for(var i=0;i<this.signleCzxtList.length;i++){
                            if(this.signleCzxtList[i]=="ios平台"){
                                czxt.push("ios");
                            }
                            else if(this.signleCzxtList[i]=="安卓平台"){
                                czxt.push("android");
                            }
                        }
                        param.czxq=czxt;
                    }
                    //等级
                    if(this.signleDjList&&this.signleDjList.length>0){
                        param.zddj=parseInt(this.signleDjList[0].minlevel) ;
                        param.zgdj=parseInt(this.signleDjList[0].maxlevel);
                    }
                    //评分
                    if(this.pf.zhsl){
                        param.zhsl=parseInt(this.pf.zhsl);
                    }
                    if(this.pf.rwpf){
                        param.rwpf=parseInt(this.pf.rwpf);
                    }
                    if(this.pf.cwpf){
                        param.cwpf=parseInt(this.pf.cwpf);
                    }
                    if(this.pf.zbpf){
                        param.zbpf=parseInt(this.pf.zbpf);
                    }
                    //价格
                    if(this.inputmaxprice){
                        param.zgjg=parseInt(this.inputmaxprice);
                    }
                    if(this.inputminprice){
                        param.zdjg=parseInt(this.inputminprice);
                    }
                    //排序
                    if(this.tab==0){
                    param.orderby="zx";
                    } else if(this.tab==1){
                        param.orderby="rq";
                    }else if(this.tab==2){
                        param.orderby="sc";
                    }else if(this.tab==3){
                        param.orderby="jg";
                    }
                    //是否逆序 isRed为true时上三角红色
                    param.isdesc=this.isRed;
                }
            axios.post("http://81.68.253.206:8081/page/getShopRoleList",
            param,
            {
                headers: {
                'token': localStorage.getItem("UserToken") }
            } 
        ).then(res=>{
           
        if(res.data&&res.data.data&&res.data.status){
            this.SpecificList=res.data.data;
        }
        
    })
        }
    },
    components: {
      Common
    },
    mounted(){
        this.search(0);
  },

    
}
</script>
<style lang="scss" scoped>
.condition-container{
    margin-top: rem(130);
    width: 100%;
    .fixedBar{
        width: 100%;
        max-width: 750px;
        min-width: 320px;
        position: fixed;
        top: rem(130);
        background-color: #fff;
        z-index: 4;
    }
    .all{
        width: 100%;
        height: rem(130);
        line-height: rem(130);
        background-color: #fff;
        border-top: 1px solid #f5f5f5;
        text-align: center;
        font-size: rem(40);
        .firstBar{
            float: left;
            width: 88%;
            height: rem(130);
            .checked{
                    color:#e74e4b!important;
                }
            
            .condition-general{
                position: relative;
                float: left;
                width: 25%;
                .checkeddown{
                    border-top-color: #e74e4b!important;
                }
                .checkedup{
                    border-top-color: #e74e4b!important;
                }
                .priceup{
                    position: absolute;
                    display: inline-block;
                    top: rem(45);
                    right: rem(100);
                    width: 0;
                    height: 0;
                    -webkit-border-radius: rem(5);
                    -moz-border-radius: rem(5);
                    border-radius: rem(5);
                    border-style: solid;
                    border-width: rem(15) rem(12) 0;
                    border-color: transparent;
                    border-top-color: #ccc;
                    margin-left: rem(10);
                    transform: rotate(180deg);
                }
                .pricedown{
                    display: inline-block;
                    position: absolute;
                    top: rem(70);
                    right: rem(100);
                    width: 0;
                    height: 0;
                    -webkit-border-radius: rem(5);
                    -moz-border-radius: rem(5);
                    border-radius: rem(5);
                    border-style: solid;
                    border-width: rem(15) rem(12) 0;
                    border-color: transparent;
                    border-top-color: #ccc;
                    margin-left: rem(10);

                }
            }
        }
        .search{
            float: left;
            width: 12%;
            border-left: 1px solid #f5f5f5;
        }
        
    }
    .detail{
        width: 100%;
        height: rem(150);
        line-height: rem(150);
        background-color: #fff;
        border-top: 1px solid #f5f5f5;
        text-align: center;
        font-size: rem(40);
        .secondBar{
             width: 100%;
            display: flex;
            padding:rem(30) 0 rem(10) 0;
            .active{
            background-color: #fff!important;
            color: #e74e4b;
            border: 1px solid #f5f5f5;
            border-bottom: 0;
            height: rem(130)!important;
            padding-bottom: rem(30);

            .arrow{
                    border-top-color: #e74e4b!important;
                    transform: rotate(180deg);
                }
            }
            .condition-detail{
                flex: 1;
                padding:0 rem(20) ;    
                white-space: nowrap;
                height: rem(100);
                line-height: rem(100);
                background-color: #f5f5f5;
                margin-right: rem(30);
                border-radius: rem(15);
                
                .pfstyle{
                    width: rem(320);
                    height: rem(100);
                line-height: rem(100);
                overflow: hidden;
                text-overflow: ellipsis;
                text-align: center;
                white-space: nowrap

                }

                .arrow{
                    display: inline-block;
                    width: 0;
                    height: 0;
                    -webkit-border-radius: rem(5);
                    -moz-border-radius: rem(5);
                    border-radius: rem(5);
                    border-style: solid;
                    border-width: rem(12) rem(12) 0;
                    border-color: transparent;
                    border-top-color: #555;
                    margin-left: rem(10);
                    vertical-align: middle;
                }
            }
            li:first-child{
                margin-left: rem(30);
            }
        }

    }
    .czxt{
        width: 100%;
        height: rem(190);
        background-color: #fff;
        border-top: 1px solid #f5f5f5;
        font-size: rem(40);
        text-align: center;
        .half{
            width: 100%;
            display: flex;
            padding:rem(30) 0;
            .half-cont{
                flex: 1;
                 padding:0 rem(20) ;
                 white-space: nowrap;
                height: rem(120);
                line-height: rem(120);
                background-color: #f5f5f5;
                margin-right: rem(30);
                border-radius: rem(15);
            }
            li:first-child{
                margin-left: rem(30);
            }

        }
        
    }
    .dj{
        width: 100%;
        height: rem(190);
        background-color: #fff;
        border-top: 1px solid #f5f5f5;
        font-size: rem(40);
        text-align: center;
        .three{
            display: flex;
            width: 100%;
             padding:rem(30) 0;
             .three-cont{
                flex: 1;
                padding:0 rem(20) ;
                white-space: nowrap;
                height: rem(120);
                line-height: rem(120);
                background-color: #f5f5f5;
                margin-right: rem(30);
                border-radius: rem(15);
             }
              li:first-child{
                margin-left: rem(30);
            }

        }

    }
    .pf{
        width: 100%;
        height: rem(330);
        background-color: #fff;
        border-top: 1px solid #f5f5f5;
        font-size: rem(40);

         li:nth-child(2n+1){
                margin-left: 2%;
            }
        li:first-child,
        li:nth-child(2){
            margin-top: rem(30);

        }
        .half-pf{
         display: flex;
         height: rem(120);
         line-height: rem(120);
         float: left;
         width: 47%;
        margin-right: 2%;
        margin-bottom: rem(30);
        .pf-title{
        flex: 1;
        font-size: rem(40);
        }
        .pf-sign{
            width: rem(40);
            font-size: rem(40);
        }
       .point{
        width: rem(180);
        height: rem(60);
        line-height: rem(60);
        padding: rem(25);
        border-radius: rem(15);
        border: 1px solid #ccc;
        outline:none;
        font-size: rem(40);
        }
        .point::-webkit-input-placeholder{
        color: #ccc;
        }

    }
    }
    .jg{
        width: 100%;
        background-color: #fff;
        border-top: 1px solid #f5f5f5;
        font-size: rem(40);
        text-align: center;
        
        .jg-input{
            display: flex;
            width: 100%;
            margin-top: rem(30);
            .fgf{
                width: rem(30);
                 height: rem(100);
                line-height: rem(100);
            }
            .jg-min{
                flex: 1;
                float: left;
                height: rem(100);
                line-height: rem(100);
                outline:none;
                border-radius: rem(15);
                border: 1px solid #ccc;
                font-size: rem(40);
                padding-left:rem(30) ;
            }
            input::-webkit-input-placeholder{
                     color: #CCC;
                }
            input:first-child{
                margin-left: 2%;
            }
            input:last-child{
                margin-right: 2%;
            }
        }

        .three-jg{
             padding:rem(30) 0;
            
            .three-txt{
                width: 30.6%;
                float: left;
                height: rem(120);
                line-height: rem(120);
                background-color: #f5f5f5;
                margin-right: 2%;
                border-radius: rem(15);
                margin-bottom: rem(30);
            }
            li:nth-child(3n+1){
                margin-left: 2%;
            }
        }
    }
}
.btn{
    display: flex;
    width: 100%;
    height: rem(140);
    line-height: rem(140);
    border-top: 1px solid #f5f5f5;
    font-size: rem(45);
    text-align: center;
    z-index: 2;
     .reset{
    flex: 1;
    background-color: #fff;
    }
    .sure{
        flex: 2;
        color: #fff;
        background-color: #e74e4b;
    }
}   
.mask{
    position: fixed;
    left: 0;
    right: 0;
    max-width: 750px;
    width: 100%;
    margin: 0 auto;
    min-height: -webkit-fill-available;
    background: rgba(0,0,0,.3);
    z-index: 1;
}
.activeitem{
    position: relative;
        color:#e74e4b;
        background-color:#fff!important; 
        border: 1px solid #e74e4b;

    .rightup{
        width: rem(60);
        height: rem(40);
        position: absolute;
        top: 0;
        right: rem(-5);
        background: url(../../../assets/imgs/rightup.svg) no-repeat 50% 50%;
        background-size: 100% 100%;
        border-radius:0 rem(15) 0 0 ;
    }
}     
.content{
    width: 100%;
    margin-top: rem(400);
    background-color: #fff;
    padding: 0 rem(30);
}             

.clear{clear:both;}


</style>